<template>
  <div class="panel">
    <div class="panel-header">
      {{ $route.meta.title }}
    </div>
    <i-form
      ref="form"
      class="revise_pass_form"
      :items="items"
      :model="form"
      :rules="rules"
    >
    </i-form>
    <div class="revise_pass_buttons">
      <el-button type="success" @click="handleSubmit">修改密码</el-button>
      <el-button type="primary" @click="handleBack">返回</el-button>
    </div>
  </div>
</template>
<script>
import formValidate from '@/utils/validate'
import { modifyPassword } from '@/api/mySelf'
import md5 from 'md5'
export default {
  name: 'MyselfRevisePas',
  data() {
    return {
      items: [
        {
          label: '旧密码',
          type: 'password',
          'show-password': true,
          clearable: true,
          required: true,
          value: 'oldPassword',
        },
        {
          label: '新密码',
          type: 'password',
          clearable: true,
          'show-password': true,
          required: true,
          value: 'newPassword',
        },
        {
          label: '确认密码',
          clearable: true,
          'show-password': true,
          type: 'password',
          required: true,
          value: 'confirmPassword',
        },
      ],
      form: {},
      rules: {
        oldPassword: [
          { required: true, message: '请输入密码' },
          { validator: formValidate('validatePassword') },
        ],
        newPassword: [
          { required: true, message: '请输入密码' },
          { validator: formValidate('validatePassword') },
        ],
        confirmPassword: [
          {
            required: true,
            message: '请输入确认密码',
          },
          {
            validator: (...args) => {
              if (args[1] !== this.form.newPassword) {
                args[2](new Error('两次密码不一致!'))
              } else {
                args[2]()
              }
            },
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return

        // delete this.form.confirmPassword

        // this.form.oldPassword = md5(this.form.oldPassword)
        // this.form.newPassword = md5(this.form.newPassword)

        let params = {
          oldPassword: md5(this.form.oldPassword),
          newPassword: md5(this.form.newPassword),
        }
        modifyPassword(params)
          .then(() => {
            this.$message({
              type: 'success',
              message: '修改成功,请重新登录',
              showClose: true,
            })
            this.$store.dispatch('fedLogOut').then(() => {
              this.$router.push('/login')
            })
          })
          .catch((err) => {
            console.log(err)
          })
      })
    },
    handleBack() {
      this.$router.push('/myself/info')
    },
  },
}
</script>
<style lang="scss" scoped>
.revise_pass_form {
  width: 50%;
}

.revise_pass_buttons {
  padding-left: 100px;
}
</style>
